/* eslint-disable */
import React, { Component } from 'react';
import { Map }  from 'react-amap';
import PublicService from '../../../services/PublicService';
import styles from './index.less';

const docElement = window.document.documentElement;

/**
 * 高德地图
 * react-amap 组件库目前包含的组件是有限的 children就是自己定义的地图组件 
 * 参考 https://elemefe.github.io/react-amap/components/about
 * 给 Map 组件的所有子组件注入两个属性：地图实例 (__map__)，和地图容器(__ele__)；
 */
class GDMap extends Component{

  // 此处只定义了部分Props 更多参数可参考上方的链接
  static defaultProps = {
    amapkey: '02a3bf2d03850cefb96752b12376653d',                  // 高德地图开发者申请的key
    amapStyle: 'amap://styles/a7a309468692d4b7786789137e26da9c',  // 地图自定义样式
    center: {                                                     // 地图中心点
      longitude: 120.633541,
      latitude: 29.803041,
    },                        
    city: '绍兴市',  
    districts: ["诸暨市", "嵊州市", "越城区", "柯桥区", "上虞区", "新昌县"],               
    zoom: 10,
    viewMode: "3D", 
    pitch: 70,                                                
    version: '',                                                  // version 指定高德地图版本 不填则使用默认值: 1.4.0
    height: docElement.clientHeight,                              // 地图容器的高度
    width: docElement.clientWidth,                                // 地图容器的宽度
    style: {},                                                    // 容器样式                                  
    className: "",                                                // 容器类名
    children: null,                                               // 自定义地图子组件
    onCreated: null,                                              // 地图创建成功回调 返回地图实例 可直接操作地图
    color: [34 / 255, 126 / 255, 168 / 255, 0.8],
    selectColor: [34 / 255, 126 / 255, 168 / 255, 1],
  }

  constructor(props) {
    super(props);
    this.amapEvents = {
      // 高德地图 Map 实例创建成功；如果你要亲自对实例进行操作，可以从这里开始
      created: this.onCreated,
      click: this.props.onClick
    };
    this.map = null;
    this.prisms = [];
    this.polygons = [];
    this.object3Dlayer = null;
    this.state = {
      height: props.height,
      width: props.width
    }
  }

  componentDidMount() {
    window.addEventListener('resize', this.handleWindowResize())
  }

  componentWillUnMount() {
    window.removeEventListener(this.handleWindowResize())
  }

  // 窗口改变时需要重新设置地图大小
  handleWindowResize = () => {
    const func = () => {
      const { clientWidth, clientHeight } = docElement;
      this.setState({
        height: clientHeight,
        width: clientWidth
      });
    }
    return PublicService.debounce(func, 100);
  }

  // 先执行默认的created事件(这里主要用于设置默认值)
  // 再执行props中的created
  onCreated = (map) => {
    const { amapStyle, onCreated } = this.props;
    let handle = {
      toggle3Dlayer: this.toggle3Dlayer, 
      toggleMarker: this.toggleMarker,
      // addGltf: this.addGltf
    }
    this.map = map;
    this.map.setMapStyle(amapStyle);
    // this.createBorder();
    this.createDistrictName();
    onCreated && onCreated(map, handle);
  }

  updatePrism = (obj) => {
    // 重置 prism 颜色
    this.prisms.forEach((prism) => {
        this.updatePrismColor(prism, this.props.color);
    });
    // 更新选中 prism 的 vertexColors
    this.updatePrismColor(obj, this.props.selectColor);
  }

  updatePrismColor = (prism, color) => {
    if(!prism) return;
    let vertexColors = prism.geometry.vertexColors;
    let len = vertexColors.length;
    for (let i = 0; i < len / 4; i++) {
      let r = color[0];
      let g = color[1];
      let b = color[2];
      let a = color[3];
      // 不能重新赋值，只允许修改内容
      vertexColors.splice(i * 4, 4, r, g, b, a);
    }
    prism.needUpdate = true;
    prism.reDraw();
  }

  // 添加模型
  addGltf = () => {
    let opt = [
      { url: require("../../../assets/gltf/107.gltf"), lng: 120.697045, lat: 29.744595 },
    ]

   }

  // 显隐object3Dlayer图层
  toggle3Dlayer = (flag) => {
    this.object3Dlayer[flag ? 'show' : 'hide']();
  }

  // 添加或删除marker
  toggleMarker = (flag) => {
    this.map[flag ? 'add' : 'remove'](this.polygons);
  }

  // 绘制边界
  createBorder = () => {
    let map = this.map;
    const { districts, center, zoom, city } = this.props;
    this.prisms = [];
    this.polygons = [];
    this.object3Dlayer = null;

  };

  // 创建行政区名标注
  createDistrictName = () => {
    let map = this.map;
    let position = [
      { longitude: 120.595845, latitude: 30.061915, name: '越城区' },
      { longitude: 120.366505, latitude: 30.104694, name: '柯桥区' },
      { longitude: 120.880283, latitude: 29.988125, name: '上虞区' },
      { longitude: 120.968664, latitude: 29.408594, name: '新昌县'},
      { longitude: 120.275103, latitude: 29.694306, name: '诸暨市'},
      { longitude: 120.757019, latitude: 29.585913, name: '嵊州市' }
    ]
    
    for(let i = 0; i < position.length; i++) {
      const { longitude, latitude, name } = position[i];
      // let marker = new AMap.Marker({
      //   map: map,
      //   position: [longitude, latitude],
      //   content: `<div class="marker-zhishu">${name}</div>`,
      // });
    }
  }

  render() {
    const { children, style, className } = this.props;
    const { height, width } = this.state;
    return (
      <div
        className={className}
        style={{
          height,
          width,
          ...style
        }}
      >
        <Map 
          events={this.amapEvents}
          {...this.props}
        >
          { children }
        </Map>
      </div>
    )
  }

}

export default GDMap
